<template>
  <dv-border-box-11 :title="fdata.name">
    <div class="my-box" v-show="mqttdata.loading">
      <div class="col">
        <div class="lamp">
          <dv-border-box-8 style="background-color:#eee">
            <svg height=100% width=100% viewBox="0,0,18,100">
              <rect x="1" y="2" width="16" height="30" :fill="mqttdata.lamp.red?'#ff0000':'#550000'" stroke="#eee" />
              <rect x="1" y="35" width="16" height="30" :fill="mqttdata.lamp.green?'#00ff00':'#005500'" stroke="#eee" />
              <rect x="1" y="68" width="16" height="30" :fill="mqttdata.lamp.yellow?'#ffff00':'#555500'" stroke="#eee" />
            </svg>
          </dv-border-box-8>
        </div>
      </div>
      <div class="col">
        <div class="all-product">
          <dv-border-box-10>
            <div style="height:100%;color: #fff;text-align:center;padding:auto;">
              <div style="width:100%;height:20%;padding-top:5%;font-size:20px">设备总产量</div>
              <dv-digital-flop :config="allProConfig" style="width:100%;height:50%;font-size:28px" />
            </div>
          </dv-border-box-10>
        </div>
        <div class="min-err">
          <p style="width:100%;color:#fff;font-size:20px;text-align:center;align-items: center;">
            设备故障率
          </p>
          <dv-water-level-pond :config="errConfig" style="width:100%;height:80%;"></dv-water-level-pond>
        </div>
      </div>
      <div class="col product-chart"></div>
      <div class="col efficiency-chart"></div>
    </div>
    <div v-show="!mqttdata.loading">
      <dv-loading style="color: #fff;vertical-align: middle;position: absolute;">等待数据中...</dv-loading>
    </div>
  </dv-border-box-11>
</template>

<script>
import Charts from '@jiaminghi/charts'

export default {
  props: ['index', 'fdata'],
  data() {
    return {
      productChart: null,
      proOption: null,
      efficientChart: null,
      effOption: null,
      // allProConfig: {
      //   number: [100],
      //   content: '{nt}个',
      //   style: {
      //     fontSize: 48,
      //     shadowColor: '#2A63AF',
      //     fill: '#3A93EF',
      //     stroke: '#3A93EF',
      //     shadowOffsetX: 1,
      //     shadowOffsetY: 1
      //   }
      // },
      // errConfig: {
      //   data: [66, 55],
      //   shape: 'roundRect',
      //   colors: ['#A24034', '#C0796F']
      // },
    }
  },
  computed: {
    mqttdata() {
      return this.fdata
    },
    allProConfig() {
      let obj = {
        number: [this.fdata.product],
        content: '{nt}个',
        style: {
          fontSize: 48,
          shadowColor: '#2A63AF',
          fill: '#3A93EF',
          stroke: '#3A93EF',
          shadowOffsetX: 1,
          shadowOffsetY: 1
        }
      };
      return obj;
    },
    errConfig() {
      let num = this.fdata.errRate;
      let color = [];
      if(num < 20) {
        color = ['#F7ED76', '#F7F2A7']
      } else if(num < 50) {
        color = ['#F7AD40', '#FCBC5F']
      } else {
        color = ['#F24034', '#D0796F']
      }
      let obj = {
        data: [num, num - 10],
        shape: 'roundRect',
        colors: color
      };
      return obj;
    }
  },
  watch: {
    mqttdata: {
      handler(newVal){
        this.productChartUpdate(newVal.allProduct);
        this.efficientChartUpdate(newVal.efficiency);
      },
      deep: true
    }
  },
  mounted() {
    this.initProductChart();
    this.initEfficientChart();
  },
  methods: {
    initProductChart() {
      const _this = this;
      const container = document.querySelectorAll('.product-chart')[this.index];
      this.productChart = new Charts(container);
      this.proOption = {
        title: {
          text: '产量统计',
          style: {
            fill: '#fff',
            fontSize: 17,
            textAlign: 'center',
            textBaseline: 'bottom'
          }
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '10%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          name: '分钟',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
          nameTextStyle: {
            fill: '#fff',
            fontSize: 14
          },
          axisLine: {
            style: {
              stroke: '#fff'
            }
          },
          axisLabel: {
            style: {
              fill: '#fff',
              fontSize: 10
            }
          },
          axisTick: {
            style: {
              stroke: '#fff'
            }
          }
        },
        yAxis: {
          name: '产量/个',
          data: 'value',
          min: 0,
          max: 12,
          nameTextStyle: {
            fill: '#fff',
            fontSize: 14
          },
          axisLine: {
            style: {
              stroke: '#fff'
            }
          },
          axisLabel: {
            style: {
              fill: '#fff',
              fontSize: 10
            }
          },
          axisTick: {
            style: {
              stroke: '#fff'
            }
          }
        },
        series: [{
          data: _this.mqttdata.allProduct,
          type: 'bar',
          gradient: {
            color: ['#2782fa', '#27c0f3']
          },
          label: {
            show: true
          },
          backgroundBar: {
            show: true,
            style: {
              fill: 'rgba(255, 255, 255, 0.1)'
            }
          }
        }]
      };
      this.productChart.setOption(this.proOption);
    },
    initEfficientChart() {
      const _this = this;
      let container = document.querySelectorAll('.efficiency-chart')[parseInt(this.index)];
      this.efficientChart = new Charts(container);
      this.effOption = {
        title: {
          text: '设备运行效率',
          style: {
            fill: '#fff',
            fontSize: 17,
            textAlign: 'center',
            textBaseline: 'bottom'
          }
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '10%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          name: '分钟',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
          nameTextStyle: {
            fill: '#fff',
            fontSize: 14
          },
          axisLine: {
            style: {
              stroke: '#fff'
            }
          },
          axisLabel: {
            style: {
              fill: '#fff',
              fontSize: 10
            }
          },
          axisTick: {
            style: {
              stroke: '#fff'
            }
          }
        },
        yAxis: {
          name: '效率 / %',
          data: 'value',
          min: 0,
          max: 100,
          nameTextStyle: {
            fill: '#fff',
            fontSize: 14
          },
          axisLine: {
            style: {
              stroke: '#fff'
            }
          },
          axisLabel: {
            style: {
              fill: '#fff',
              fontSize: 10
            }
          },
          axisTick: {
            style: {
              stroke: '#fff'
            }
          }
        },
        series: [{
          data: _this.fdata.efficiency,
          type: 'line',
          lineArea: {
            show: true,
            gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
          },
          label: {
            show: true
          }
        }]
      };
      this.efficientChart.setOption(this.effOption);
    },
    productChartUpdate(data) {
      this.proOption.series[0].data = data;
      this.productChart.setOption(this.proOption);
    },
    efficientChartUpdate(data) {
      this.effOption.series[0].data = data;
      this.efficientChart.setOption(this.effOption);
    }
  }
}
</script>

<style lang="scss" scoped>
.my-box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.col:nth-child(1) {
  flex: 1;
  margin-top: 80px;
  margin-left: 50px;
  margin-right: 25px;
  margin-bottom: 25px;
}
.col:nth-child(2) {
  flex: 4;
  margin-top: 80px;
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
}
.col:nth-child(3) {
  flex: 6;
  margin-top: 80px;
  margin-left: 25px;
  margin-right: 5px;
  margin-bottom: 25px;
}
.col:nth-child(4) {
  flex: 6;
  margin-top: 80px;
  margin-left: 5px;
  margin-right: 30px;
  margin-bottom: 25px;
}
.lamp {
  padding-top: 20%;
}
.all-product {
  position: relative;
  margin: 5px;
  padding-top: -5%;
  flex: 1;
}
.min-err {
  margin: 5px;
  flex: 2;
}
</style>
